<template>
	<div class="page">
		<div class="nav">
			<div class="navt">您当前可用券</div>
			<div class="navb">12</div>
		</div>
		<div class="list" >
			<div class="listl" v-for="(item,index) in 'aaaaaaa'" :key="index">
				<img src="../../assets/images/assemble.jpg" class="img"/>
				<div class="spuname">一样一样一样一样YY语音</div>
				<div class="num">1000</div>
				<div class="btn">我也兑换</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			
		},
		created() {
			
		}
	}
	
</script>

<style scoped>
	.nav{
		width: 100%;
		height: 2.5rem;
		background: #F44939;
	}
	.navt{
		text-align: center;
		color: #fff;
		line-height: .65rem;
		font-size: .3rem;
		padding-top: .32rem;
	}
	.navb{
		text-align: center;
		color: #fff;
		line-height: .96rem;
		font-size: .6rem;
		font-weight: bold;
	}
	.list{
		display: flex;
		justify-content: space-between;
		padding: .3rem .22rem;
		flex-wrap: wrap;
	}
	.listl{
		background: #fff;
		margin-bottom: .24rem;
		flex: 0 0 3.38rem;
		border-radius: .12rem;
		overflow: hidden;
		
	}
	.img{
		width:3.38rem ;
		height: 3.38rem;
		display: block;
	}
	.spuname{
		margin-top: .14rem;
		padding: 0 .22rem;
		font-size: .28rem;
		line-height: .45rem;
		height: .45rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.num{
		padding: 0 .22rem;
		line-height: .45rem;
		font-size: .26rem;
		color: #7d7d7d;
	}
	.btn{
		margin: .3rem auto;
		width: 1.4rem;
		line-height: .5rem;
		border-radius: .25rem;
		text-align: center;
		color: #FFFFFF;
		background: #F44939;
		font-size: .22rem;
	}
</style>
